<template>
  <div class="TravelMap">
      <div id="main"></div>
  </div>
</template>
<script>
import ChinaJson from  "@/api/china.json"
import { travelMap} from '@/api/api.js'
export default{
  name:'TravelMap',
  data(){
    return{
    }
  },
  async created(){
     const res = await travelMap()
     if(res.data.status ===200){
        let { points,linesData } = res.data.data;
        this.drawTravel(points,linesData)
     }
  },
  methods:{
    drawTravel(points,linesData){
      let myChart = this.echarts.init(document.querySelector('#main'))
      this.echarts.registerMap('china',ChinaJson) // 注册可用的地图 必须包含 geo 组件或者map图表类型 的时候才可用使用
      console.log('ChinaJson',ChinaJson);
      let option = {
          backgroundColor:'rgba(121,145,209)',
          geo:{
             map:'china',
             aspectScale:0.75, // 地图的长宽比
             zoom:1.1,
             itemStyle:{
                 normal:{
                    areaColor:{
                       type:'radial',
                       x:0.5,
                       y:0.5,
                       r:0.8,
                       colorStops:[
                          {
                            offset:0,
                            color:'#09132c'  //  0%处的颜色
                          },
                          {
                            offset:1,
                            color:'#274d68'  //  100%处的颜色
                          },
                       ],
                       globalCoord:true,
                    },
                    shadowColor:'rgb(58,115,192)',
                    shadowOffsetX:10,
                    shadowOffsetY:11,
                 }
             },
             regions:[{
               name:'南海诸岛',
               itemStyle:{
                   opacity:0.6
               }
             }]
          },
          series:[
             {  // 配置地图相关参数 绘制地图 这个对象是关于地图图表的相关设置
                type:'map',
                label:{
                   normal:{
                      show:true,   // 默认显示文字
                      textStyle:{
                        color:'#1de9b6'
                      }
                   },
                   emphasis:{
                      textStyle:{
                        color:'rgba(183,185,14)'
                      }
                   }
                },
                zoom:1.1,
                map:'china',
                itemStyle:{
                  normal:{
                    backgroundColor:'rgba(147,235,248)',
                    borderWidth:1,
                    areaColor:{
                       type:'radial',
                       x:0.5,
                       y:0.5,
                       r:0.8,
                       colorStops:[
                          {
                            offset:0,
                            color:'rgba(31,54,150)'  //  0%处的颜色
                          },
                          {
                            offset:1,
                            color:'rgba(89,128,142)'  //  100%处的颜色
                          },
                       ],
                       globalCoord:true,
                    },
                  },
                  emphasis:{
                     areaColor:'rgba(46,229,206)',
                     borderWidth:0.1,
                  }
               },
             },
             // 关于地图中散点图的配置  散点图 
             {
                type:'effectScatter',  // 散点图
                coordinateSystem:'geo',
                showEffectOn:'render', // 显示特效
                symbolSize:10,  // 散点大小
                zlevel:1,       // 层级
                //data:[ { value:[118.8062,31.9208], itemStyle:{ color:'red'} } ], // 散点颜色
                data:points,
                rippleEffect:{  // 涟漪特效相关配置
                   period:15,
                   scale:4,
                   brushType:'fill'
                }
             },
             // 地图中线路动画效果设置  线路图   不同图 层级不同
             {
                type:'lines',
                zlevel:2,
                effect:{
                   show:true,
                   period:4,  // 动画时长
                   symbol:'arrow',  // 箭头样式
                   symbolSize:7,  // 线大小
                   trailLength:0.4,  // 拖尾 
                },
                lineStyle:{
                   normal:{
                      color:'#1de9b6',
                      width:1,
                      opacity:0.1,
                      curveness:0.5   // 弯曲程度
                   }
                },
                //data:[{ coords:[ [118.8062,31.9208],[119.4543,25.9222]],lineStyle:{ color:'#4ab2e5' }  }]
                data:linesData,
             }
          ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>

.TravelMap{
      width:100%;
   #main{
      width:100%;
      height:600px;
   }
}


</style>